//搜索用户
import InputIcon from "@src/components/inputIcon";
import {useNavigate} from "react-router-dom";
import SearchIcon from "@src/assets/search.svg?react"
import "./index.scss"
import Return2Icon from "@src/assets/return2.svg?react"
import {
    createRelationship,
    usersSearch,
    userType
} from "@src/services/userinfo.ts";
import {useRequest} from "ahooks";
import {useState} from "react";
import {AnimatePresence, motion} from "framer-motion";
import {getUserInfo} from "@src/utils/userInfo"
import toast from 'react-hot-toast';
import {newsDataCreate} from "@src/store/newsData.ts";
import {socketCreate} from "@src/store/socket"

const itemVariants = {
    hidden: {opacity: 0, translateX: "0"}, // 初始状态：透明且从左侧偏移 300px
    visible: {opacity: 1, translateX: 0, transition: {duration: 0.3, ease: "easeInOut"}},
    exit: {opacity: 0, translateX: "125%", transition: {duration: 0.3}} // 退出状态：透明且向左偏移 300px
};
const SearchUser = () => {
    const {user} = getUserInfo()
    const navigate = useNavigate();
    const usersSearchApi = useRequest(usersSearch, {manual: true})
    const createRelationshipApi = useRequest(createRelationship, {manual: true});
    const {updateMyFriendRequest} = newsDataCreate()
    const [searchText, setSearchText] = useState("");
    const [userList, setUserList] = useState<userType[]>([]);
    const {socket} = socketCreate();
    const searchInput = () => {
        usersSearchApi.runAsync(searchText).then((data) => {
            setUserList(data.data.filter(item => item.id !== user.id))
        })
        setSearchText("")
    }
    const createRelationshipBtn = (item: userType) => {
        if (user.id && item.id) {
            createRelationshipApi.runAsync(user.id, item.id, "0").then(() => {
                toast.success(`已向${item.name}发送好友申请`)
                socket.emit("private_message_hint", {
                    recipientEmail: item.email,
                    message: `${user.name}向您发起了好友请求`
                })
                updateMyFriendRequest()
            })
        }
    }

    return <div className="SearchUser">
        <div className="head centered">
            <Return2Icon onClick={() => navigate(-1)}></Return2Icon>
            <InputIcon value={searchText} type="search" Icon={<SearchIcon></SearchIcon>} placeholder="搜索 名称/邮箱"
                       onChange={(e) => setSearchText(e.target.value)}
                       onKeyDown={(e) => {
                           if (e.key === 'Enter') {
                               if (searchText.trim() !== "") {
                                   searchInput()
                               }
                           }
                       }}>
            </InputIcon>
            <div className="head-text-btn" onClick={() => navigate(-1)}>取消</div>
        </div>
        <ul>
            <AnimatePresence>
                {userList.map((item) =>
                    <motion.li
                        key={item.id}
                        className="news-li"
                        variants={itemVariants} // 使用定义好的动画变体
                        initial="hidden" // 初始状态
                        animate="visible" // 动画进入状态
                        exit="exit" // 动画退出状态
                    >
                        <div>
                            <img className="userHead" src={item.avatar} alt=""/>
                        </div>
                        <div>
                            <div>
                                <h4 className="text-overflow-1">{item.name}</h4>
                                <p></p>
                            </div>
                            <div>
                                <p className="text-overflow-1">{item.email}</p>
                            </div>
                        </div>
                        <button className="z-button" onClick={() => createRelationshipBtn(item)}>添加</button>
                    </motion.li>)}
            </AnimatePresence>
        </ul>
    </div>
}
export default SearchUser